<template>
  <div class="watch-header">
    <template v-if="!loading">
      <transition>
        <el-row
          type="flex"
          class="player-header"
          :style="{ paddingRight: isCollapse ? '336px' : '0px' }"
        >
          <!-- 播放器 -->
          <div class="player-wrap">
            <LiveVideoPlayer
              v-if="getCurrentPlayItem.course_type == 2"
              :data="detailInfo"
            ></LiveVideoPlayer>
            <template v-else>
              <template v-if="getCurrentPlayItem.section_data.data_type == 3">
                <ImageText :detailInfo="detailInfo"></ImageText>
              </template>
              <template v-else-if="getCurrentPlayItem.section_data.data_type == 4">
                <EpubPlayer
                  v-if="getCurrentPlayItem.section_data.extension == 'epub'"
                  :detailInfo="detailInfo"
                >
                </EpubPlayer>
                <PdfPlayer v-else :detailInfo="detailInfo"></PdfPlayer>
              </template>
              <template v-else>
                <CcVideoPlayer
                  :detailInfo="detailInfo"
                  v-if="getCurrentPlayItem.section_data.stock == 'bokecc'"
                ></CcVideoPlayer>
                <AliyunVideoPlayer :detailInfo="detailInfo" v-else></AliyunVideoPlayer>
              </template>
            </template>
          </div>
          <!-- 右侧目录/笔记 -->
          <transition>
            <div
              class="sidebar"
              :style="{ transform: isCollapse ? 'translateX(0)' : 'translateX(100%)' }"
            >
              <el-tabs v-model="sidebarActiveName">
                <el-tab-pane label="目录" name="directory">
                  <div class="directory-card">
                    <el-scrollbar>
                      <template v-if="detailInfo.course_type == 1 || detailInfo.course_type == 2">
                        <VideoDirectory
                          :courseId="detailInfo.id"
                          :detailInfo="detailInfo"
                        ></VideoDirectory>
                      </template>
                      <template v-else-if="detailInfo.course_type == 4">
                        <ClassesVideoDirectory :detailInfo="detailInfo"></ClassesVideoDirectory>
                      </template>
                    </el-scrollbar>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="笔记" name="note" v-if="switchNote">
                  <VideoNote :detailInfo="detailInfo"></VideoNote>
                </el-tab-pane>
              </el-tabs>
            </div>
          </transition>
          <!-- 按钮 -->
          <transition>
            <div
              class="sidebar-btn"
              :style="{ right: isCollapse ? '336px' : '0px' }"
              @click="handleUnfoldChange"
            >
              <i :class="isCollapse ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
            </div>
          </transition>
        </el-row>
      </transition>
      <el-row type="flex" align="middle" class="section-bottom">
        <div class="course-info">
          <el-row type="flex" align="middle" justify="space-between" class="course-head">
            <div class="title" @click="toBack">{{ detailInfo.title }}</div>
            <!-- <div class="data">{{ detailInfo.sale_count }}人在学</div> -->
          </el-row>
          <el-row type="flex" class="course-hints">
            <div class="hint-item">{{ expiration }}</div>
            <div class="hint-item">
              <el-button
                type="text"
                :class="[collectionState ? 'acitve' : '']"
                icon="edu-icon-shoucang edu-icon--left"
                @click="handleDeleteCollection(detailInfo)"
                v-if="collectionState"
                >已收藏</el-button
              >
              <el-button
                type="text"
                icon="edu-icon-shoucang edu-icon--left"
                @click="handleCollection(detailInfo)"
                v-else
                >收藏</el-button
              >
            </div>
            <div class="hint-item">
              <el-button
                type="text"
                slot="reference"
                icon="edu-icon-fenxiang edu-icon--left"
                @click="handleShareClick"
                >分享</el-button
              >
              <!--  <el-popover placement="bottom" trigger="hover">
              <el-row type="flex" justify="center">
                <edu-share></edu-share>
              </el-row>
              <el-button type="text" slot="reference" icon="edu-icon-fenxiang edu-icon--left">分享</el-button>
            </el-popover> -->
            </div>
            <div class="hint-item">
              <el-popover placement="bottom" trigger="hover">
                <el-row type="flex" justify="center">
                  <vue-qr :text="wxpayQrcode" :size="120" :margin="0"></vue-qr>
                </el-row>
                <el-button type="text" slot="reference" icon="edu-icon-saoma edu-icon--left"
                  >扫码查看</el-button
                >
              </el-popover>
            </div>
            <div class="hint-item">
              <el-link
                :underline="false"
                icon="el-icon-service"
                target="_blank"
                :href="
                  siteInfoUrl
                    ? 'http://wpa.qq.com/msgrd?v=1&uin=' +
                      siteInfo.online_consult +
                      '&site=qq&menu=yes'
                    : siteInfo.online_consult
                "
                >客服</el-link
              >
            </div>
          </el-row>
        </div>
        <!-- <div class="course-action" v-if="detailInfo.is_buy">
        <el-button size="small">已加入学习</el-button>
      </div> -->
        <div v-if="detailInfo.is_buy" class="finished">
          {{ `已完成：${detailInfo.finished_num}/${detailInfo.section_count}` }}
        </div>
      </el-row>
    </template>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import vueQr from 'vue-qr'
import AliyunVideoPlayer from './aliyunVideoPlayer'
import CcVideoPlayer from './ccVideoPlayer'
import LiveVideoPlayer from './liveVideoPlayer'
import PdfPlayer from './pdfPlayer'
import EpubPlayer from './epubPlayer'
import ImageText from './imageText'
import VideoDirectory from './videoDirectory'
import ClassesVideoDirectory from './classesVideoDirectory'
import VideoNote from './videoNote'
import { parseTime } from '@/utils/filters.js'
export default {
  props: {
    detailInfo: Object,
    wxpayQrcode: String,
    loading: {
      type: Boolean,
      default: true
    }
  },
  components: {
    vueQr,
    AliyunVideoPlayer,
    CcVideoPlayer,
    LiveVideoPlayer,
    ClassesVideoDirectory,
    VideoDirectory,
    VideoNote,
    PdfPlayer,
    EpubPlayer,
    ImageText
  },
  data() {
    return {
      sidebarActiveName: 'directory',
      sourceType: { 1: 'video', 2: 'live', 3: 'offline', 4: 'classes' },
      isCollapse: true
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: state => state.course.currentPlayItem
    }),
    // 用户是否登录
    ...mapGetters({
      siteInfo: 'projectSetting/getGlobSiteInfo',
      switchNote: 'projectSetting/getGlobCourseNoteSwitch'
    }),
    // 收藏状态
    collectionState() {
      if (this.detailInfo.collected == 1) {
        return true
      }
      return null
    },
    course_type() {
      return this.detailInfo.course_type
    },
    // 判断是数字，不然就是链接
    siteInfoUrl() {
      if (this.$util.digits(this.siteInfo.online_consult)) {
        return true
      } else {
        return false
      }
    },
    // 有效期
    expiration() {
      const { is_buy, term_rest, term_time } = this.detailInfo
      if (this.$util.isEmpty(this.detailInfo)) return
      if (is_buy) {
        if (term_rest === -1) return '永久有效'
        return `距离课程到期还有${Math.ceil(term_rest / (24 * 3600))}天`
      } else {
        if (term_time === 0) return '永久有效'
        else if (('' + term_time).length < 5) return `购买之日起${term_time}天内有效`
        return parseTime(term_time, '{y}年{m}月{d}日前有效')
      }
    }
  },
  methods: {
    // 收藏
    handleCollection(data) {
      this.$globalToLogin(() => {
        this.$api.createCollection(
          {
            source_type: this.sourceType[this.course_type],
            source_id: data.id
          },
          res => {
            this.$message.success(res.msg)
            this.detailInfo.collected = 1
          }
        )
      })
    },
    // 取消收藏
    handleDeleteCollection(data) {
      this.$api.deleteCollection(
        {
          source_type: this.sourceType[this.course_type],
          source_id: data.id
        },
        res => {
          this.$message.success(res.msg)
          this.detailInfo.collected = 0
        }
      )
    },
    // 点击分享
    handleShareClick() {
      this.$globalToLogin(() => {
        let query = {
          type: 1,
          id: this.$route.params.id
        }
        this.$api.getShareInfo(query, res => {
          this.$store.commit('promotion/SET_SHARE_DATA', {
            data: res.data,
            type: 1
          })
          this.$store.commit('promotion/SET_SHARE_VISIBLE', true)
        })
      })
    },
    handleUnfoldChange() {
      this.isCollapse = !this.isCollapse
    },
    toBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.watch-header {
  width: 100%;
  min-height: 565px;
  background-color: #000;
  .player-header {
    height: 486px;
    overflow: hidden;
    padding-right: 336px;
    transition: all 0.3s ease-in-out;
  }
  .player-wrap {
    flex: 1;
    min-width: 0;
    background-color: #000;
    position: relative;
  }

  .sidebar {
    width: 336px;
    background: rgba(26, 26, 26, 1);
    transition: all 0.3s ease-in-out;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
    .directory-card {
      height: calc(486px - 39px);
      ::v-deep .el-scrollbar {
        height: 100%;
        .el-scrollbar__wrap {
          overflow-x: hidden;
        }
      }
    }
    // tab
    ::v-deep .el-tabs {
      .el-tabs__header {
        display: flex;
        justify-content: center;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          left: 0;
          bottom: -1px;
          width: 100%;
          height: 1px;
          background-color: #606266;
          z-index: 1;
        }
        margin: 0;
        .el-tabs__item {
          color: #dcdfe6;
          font-size: 15px;
          &.is-active,
          &:hover {
            @include edu-color-auxiliary;
          }
        }
        .el-tabs__nav-wrap::after {
          display: none;
        }
        .el-tabs__nav {
          float: none;
        }
      }
    }
  }
  .sidebar-btn {
    width: 20px;
    height: 60px;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    right: 336px;
    z-index: 999;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #ffffff;
    background-image: url('~@assets/images/course/mulv-right.png');
  }
  .section-bottom {
    padding: 15px 0;
    background: rgba(48, 49, 51, 1);
    .course-info {
      width: 804px;
      padding: 0 30px;
      .course-head {
        color: rgba(255, 255, 255, 1);
        .title {
          max-width: 700px;
          font-size: 18px;
          font-weight: 500;
          @include ellipsis();
          cursor: pointer;
        }
        .data {
          font-size: 14px;
          font-weight: 400;
        }
      }
      .course-hints {
        margin-top: 15px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(228, 231, 237, 1);
        ::v-deep .el-button,
        .el-link {
          padding: 0;
          font-size: 12px;
          font-weight: 400;
          color: rgba(228, 231, 237, 1);
          &:hover {
            @include edu-color-auxiliary;
          }
        }
        .hint-item {
          .acitve {
            @include edu-color-auxiliary;
          }
        }
        .hint-item + .hint-item {
          margin-left: 20px;
        }
      }
    }
    .course-action {
      padding-left: 120px;
      ::v-deep .el-button {
        background: transparent;
        color: #fff;
      }
    }
    .finished {
      margin-left: auto;
      font-size: 15px;
      font-weight: 400;
      color: #ffffff;
      margin-right: 30px;
    }
  }
}
</style>
